<script setup>
import { ref } from 'vue';
import { Search } from '@element-plus/icons-vue'
import Login from './Login.vue'
import Register from './Register.vue'
import { useUserStore } from "../store/user"
import { useModalStore } from "../store/modal"

const user =  useUserStore();
const modal =  useModalStore();

const input = ref("");

</script>
<template>
    <div class="flex items-center gap-2">
        <img class="h-16 w-36" src="https://front.cdn.xdclass.net/images/logo.webp"/>
        <div class="flex items-center justify-between float-[1]">
            <a href="#">首页</a>
            <a href="#">课程中心</a>
            <a href="#" class="flex items-center justify-center">
                <img src="https://front.cdn.xdclass.net/images/vip_icon.webp" class="w-5 h-5"/>
                <span>超级会员</span>
            </a>
            <a href="#">工具</a>
            <a href="#">
                <sapn>自学路线</sapn>
                <el-icon>
                    <ArrowDownBlod/>
                </el-icon>
            </a>
            <a href="#">
                <sapn>一对一辅导</sapn>
                <el-icon>
                    <ArrowDownBlod/>
                </el-icon>
            </a>
            <a href="#">
               <el-input v-model="input"  class="w-60" placeholder="请输入搜索内容">
                <template #append>
                   <el-icon>
                     <Search/>
                   </el-icon>
                </template>
               </el-input>
            </a>
            <a href="#">兑换码</a>
            <a href="#">云服务器</a>
        </div>
        <div v-if="!user.isLogin">
            <el-button link size="large" @click="modal.switchRegVisible()">登录</el-button>
            <el-button link size="large" @click="modal.switchLoginVisible()">注册</el-button>
        </div>
       <div v-else>
        <el-popconfirm title="是否退出登入" @confirm="user.logout"> 
            <template #refernece>
              <el-button>{{ user.user.account }}</el-button>
            </template>
        </el-popconfirm>
       </div>
       <Register/>
       <Login/>
    </div>
</template>